<template>
  <!-- 搜索页面 -->
  <div>
    <div class="header">
      <div
        class="left iconfont icon-fangxianganniu2"
        @click="$router.go(-1)"
      ></div>
      <div class="center">
        <van-search
          v-model.trim="value"
          placeholder="搜索歌手、歌词"
          left-icon=""
          background="#d44439"
          @input="SearchSong"
        />
        <div class="line"></div>
      </div>
    </div>
    <main>
      <!-- 搜索展示之数据 -->
      <div v-show="value !== ''" class="searchlish">
        <ul v-show="MvOption == 1">
          <li
            class="exhibition"
            v-for="ele in list1"
            :key="ele.id"
            @click="setId(ele.id)"
          >
            <div>
              <img :src="ele.artists[0].img1v1Url" alt="" />
            </div>
            <div class="explain">
              <h3>{{ ele.album.name }}</h3>
              <p>
                {{ ele.artists[0].name }}
              </p>
            </div>
          </li>
        </ul>
        <ul v-show="MvOption == 1000">
          <li
            class="exhibition"
            v-for="ele in list2"
            :key="ele.id"
            @click="setId(ele.id)"
          >
            <div>
              <img :src="ele.coverImgUrl" alt="" />
            </div>
            <div class="explain">
              <h3>{{ ele.name }}</h3>
              <p>
                {{ ele.creatornickname }}
              </p>
            </div>
          </li>
        </ul>
        <ul v-show="MvOption == 100">
          <li
            class="exhibition"
            v-for="ele in list3"
            :key="ele.id"
            @click="setId(ele.id)"
          >
            <div>
              <img :src="ele.img1v1Url" alt="" />
            </div>
            <div class="explain">
              <h3>{{ ele.name }}</h3>
              <p>相册：{{ ele.albumSize }}</p>
            </div>
          </li>
        </ul>
        <ul v-show="MvOption == 1004">
          <li
            class="exhibition"
            v-for="ele in list4"
            :key="ele.id"
            @click="setId(ele.id)"
          >
            <div>
              <img :src="ele.cover" alt="" />
            </div>
            <div class="explain">
              <h3>{{ ele.name }}</h3>
              <p>
                {{ ele.artistName }}
              </p>
            </div>
          </li>
        </ul>
        <div class="mv-region">
          <span @click="(MvOption = 1), (option = 0)">单曲</span>
          <span @click="(MvOption = 1000), (option = 1)">歌单</span>
          <span @click="(MvOption = 100), (option = 2)">歌手</span>
          <span @click="(MvOption = 1004), (option = 3)">MV</span>
          <div
            class="mv-region-border"
            :style="{ left: option * 46 + 'px' }"
          ></div>
        </div>
      </div>
      <!-- 默认展示之数据 -->
      <template v-if="hot !== null">
        <div v-show="value == ''">
          <!-- 热门搜索 -->
          <div class="hot">
            <h5 class="hot-search">热门搜索</h5>
            <div>
              <span
                v-for="(ele, index) in hot"
                :key="index"
                @click="add(ele.first)"
                >{{ ele.first }}</span
              >
            </div>
          </div>
          <div class="history">
            <div class="history-start" v-show="searchList.length">
              <h5>搜索历史</h5>
              <span class="iconfont icon-lajitong" @click="clearHistory"></span>
            </div>
            <ul>
              <li v-for="(ele, index) in searchList" :key="index">
                <span @click="add(ele)">{{ ele }}</span>
                <span
                  class="iconfont icon-close"
                  @click="deleteHistory(index)"
                ></span>
              </li>
            </ul>
          </div>
        </div>
      </template>
    </main>
  </div>
</template>

<script>
import { getSigin, getPopularSearch } from "../api/Signin";
export default {
  data() {
    return {
      value: "",
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      hot: null,
      flag: true, //节流
      searchList: [], //搜索历史列表
      option: 0,
      MvOption: 1,
    };
  },
  methods: {
    SearchSong() {
      //搜索
      if (this.flag) {
        setTimeout(() => {
          if (this.value !== "") {
            getSigin(this.value, this.MvOption).then((data) => {
              if (this.MvOption == 1) {
                this.list1 = data.result.songs;
              } else if (this.MvOption == 1000) {
                this.list2 = data.result.playlists;
              } else if (this.MvOption == 100) {
                this.list3 = data.result.artists;
              } else if (this.MvOption == 1004) {
                this.list4 = data.result.mvs;
              }
            });
            //如果不存在当前输入的关键词 则存入
            if (this.searchList.indexOf(this.value) === -1) {
              this.searchList.unshift(this.value);
              //历史记录最多只取十个
              this.searchList = this.searchList.slice(0, 10);
              sessionStorage.setItem(
                "keyword",
                JSON.stringify(this.searchList)
              );
            }
          }
          this.flag = true;
        }, 600);
      }
      this.flag = false;
    },
    add(value) {
      //热门搜索点击搜索
      this.value = value;
      this.SearchSong();
    },
    deleteHistory(index) {
      //删除某条历史记录
      this.searchList.splice(index, 1);
      sessionStorage.setItem("keyword", JSON.stringify(this.searchList));
    },
    clearHistory() {
      //清空历史记录
      sessionStorage.clear();
      this.searchList = [];
    },
    setId(id) {
     if(this.MvOption==1){
        this.$emit("get-player-id", id); //调用APP回调传递歌单单曲id
     }else if(this.MvOption==1000){
       this.$router.push({
         name:'ranklist',
         query:{
           'id':id
         }
       })
     }else if(this.MvOption==1004){
          this.$emit("getMvPlayerId",id)
     document.querySelector('.mvplayer').webkitRequestFullscreen() //触发div全屏
     }else if(this.MvOption==100){
          this.$router.push({
         name:'SingerDetails',
         params:{
           id:id
         }
       })
     }
    },
  },
  watch: {
    MvOption(newopt) {
      getSigin(this.value, newopt).then((data) => {
        if (newopt == 1) {
          this.list1 = data.result.songs;
        } else if (newopt == 1000) {
          this.list2 = data.result.playlists;
        } else if (newopt == 100) {
          this.list3 = data.result.artists;
        } else if (newopt == 1004) {
          this.list4 = data.result.mvs;
        }
      });
    },
  },
  created() {
    getPopularSearch().then((data) => {
      //热门搜索
      this.hot = data.result.hots;
    });
    //先读取存储的历史记录
    this.searchList = JSON.parse(sessionStorage.getItem("keyword")) || [];
  },
};
</script>

<style lang="less" scoped>
.header {
  background-color: #d44439;
  color: #fff;
  height: 39px;
  line-height: 39px;
  display: flex;
  text-align: center;
  .left {
    flex: 0 0 40px;
    font-size: 18px;
  }
  .center {
    flex: 1;
    position: relative;
    .van-search {
      padding: 0;
      width: 100%;
      height: 100%;
      div {
        background-color: #d44439;
        padding-left: 0;
        color: #fff;
      }
      /deep/ input {
        color: #fff;
      }
    }
    .line {
      position: absolute;
      left: 0;
      bottom: 8px;
      width: 300px;
      border-bottom: 2px solid #e2a29d;
    }
  }
}
main {
  height: 100%;
  padding: 0 20px;
  background-color: #f2f3f4;
  ul {
    .exhibition {
      height: 62px;
      width: 100%;
      display: flex;
      box-sizing: border-box;
      padding: 8px 0;
      background-color: #f2f3f4;
      border-bottom: 1px solid #e3e3e3;
      .explain {
        padding-top: 6px;
        flex: 1;
        h3 {
          font-size: 14px;
          max-width: 200px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        p {
          font-size: 8px;
          color: #9d9e9e;
        }
      }

      img {
        width: 46px;
        height: 46px;
        margin-right: 10px;
      }
    }
  }
  .hot {
    .hot-search {
      font-size: 14px;
      color: #ccc;
      margin: 20px 0 12px 0;
    }
    span {
      display: inline-block;
      height: 25px;
      line-height: 26px;
      text-align: center;
      font-size: 12px;
      color: #000;
      border: 1px solid #dedfdf;
      border-radius: 6px;
      padding: 0 6px;
      margin: 0 8px 6px 0;
    }
  }
  .history {
    .history-start {
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      color: #ccc;
      padding: 20px 0 12px 0;
    }
    li {
      display: flex;
      justify-content: space-between;
      height: 36px;
      line-height: 36px;
      font-size: 14px;
      color: #000;
    }
  }
}
.searchlish {
  position: relative;
  padding-top: 36px;
  .mv-region {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 194px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    span {
      display: inline-block;
      width: 46px;
      text-align: center;
    }
    .mv-region-border {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 44px;
      height: 8px;
      background-color: rgba(254, 89, 99, 0.6);
      border: 1px solid transparent;
      border-radius: 8px;
      transition: all 0.3s;
    }
  }
}
</style>